// tslint:disable
import { Component, OnInit } from '@angular/core';

import { ModalController, NavParams } from '@ionic/angular';

import { AppGlobalService } from 'src/app/shared/service/app-global.service';

import { first } from 'rxjs/operators';
declare let $: any;
@Component({
  selector: 'app-new-filter-modal',
  templateUrl: './new-filter-modal.component.html',
  styleUrls: ['./new-filter-modal.component.scss'],
})


export class NewFilterModalComponent implements OnInit {


  // 新增三种类型分筛选分类
  data: any; // 从sift组件传递的数组参数
  industryList: any;
  list: any = [];
  rangeStreamingLayoutList: any = [];// 1.9.20 新增是否住家
  bigIndus: any = { background: false };
  selectIndus: any = [];
  checkedIndus: any = "";
  max = 0;
  tip1 = '不能超过';
  tip2 = '个选中';
  // type = 'default'; // 默认类型 以后可以方便扩展为
  isLJModel = false;
  cssType: any; // 展示类型 是 区域 行业 （secondaryLinkage） 还是 整租合租 方式（streamingLayout） 还是 面积 customArea
  minInputValue = '';
  maxInputValue = '';
  bigNameId = 'bigId';

  liveAtHome: any = [];
  rangeStreamValue = { lower: '6', upper: '22' };
  rangeStreamLower = '6'; //min默认值
  rangeStreamUpper = '22'; // 默认值

  constructor(
    private modalCtrl: ModalController,
    private navParams: NavParams,
    private appGlobalService: AppGlobalService) { }

  ngOnInit() {
    this.bigNameId += new Date().getTime();
    // 从上一个页面传递的 数据数组
    this.data = JSON.parse(JSON.stringify(this.navParams.data.value));
    // 如果没有传formType则为默认值
    if (this.data.formType !== undefined) {
      this.isLJModel = this.data.formType.indexOf('LJ') > -1;
    }
    // 按钮选择类型
    if (this.data.cssType !== undefined) {
      this.cssType = this.data.cssType;
    }


    if (this.cssType === 'secondaryLinkage') {// 区域,行业

      // 最大限制选择
      if (this.data.max) {
        this.max = this.data.max;
      } else {
        this.max = 10;
      }

      // 超过最大选择提示
      if (this.data.tip1) {
        this.tip1 = this.data.tip1;
      }
      if (this.data.tip2) {
        this.tip2 = this.data.tip2;
      }

      let checkedValue;

      if (!this.data.value || !this.data.value.length) {
        checkedValue = [];
      } else if (this.data.value === '') {
        // && this.data.value.indexOf('#') == 0
        checkedValue = [];
      } else if (typeof (this.data.value) === 'string') {
        checkedValue = this.data.value.split(',');
      } else {
        checkedValue = this.data.value;
      }
      this.list = this.data.data;
      console.log('list--->' + this.list);
      // checkedValue = this.data.value;
      console.log('checkedValue--->' + checkedValue);

      this.list.forEach(element => {
        element.checkLen = 0;
        if (element.children) {
          element.children.forEach(ele => {
            ele.checkLen = 0;
            if (checkedValue && checkedValue.length) {
              checkedValue.forEach(e => {
                if (ele.value === e) {
                  element.checkLen += 1;
                  ele.selected = true;
                  this.selectIndus.push(ele);
                }
              });
            }
          });
        } else {
          if (checkedValue && checkedValue.length) {
            checkedValue.forEach(e => {
              if (element.value === e) {
                element.checkLen += 1;
                element.selected = true;
                this.selectIndus.push(element);
              }
            });
          }
        }
      });
      this.getSmallIndus(this.list[0], false);
    } else if (this.cssType === 'streamingLayout') {// 整租,合租
      this.list = this.data.subFilterItem;
      this.list.forEach((item, index) => {
        // item.dropDownList.item[index]['newName'] = item.name;
        // item.dropDownList.item[index]['newKey'] = item.dropDownList.name;
        this.list.forEach((item, index) => {
          item.dropDownList.item.forEach(element => {
            element['newName'] = item.name;
            element['newKey'] = item.dropDownList.name;
          });
        });
        this.selectIndus[index] = {
          newName: item.dropDownList.item[index]['newName'],
          newKey: item.dropDownList.item[index]['newKey'],
          value: item.dropDownList.item[index].value,
          displayName: item.dropDownList.item[index].displayName
        };
        // this.selectIndus[index] = item.dropDownList.item[0];

      });

    } else if (this.cssType === 'rangeStreamingLayout') {
      this.rangeStreamingLayoutList = this.data.subFilterItem;
      this.rangeStreamingLayoutList.forEach((item, index) => {
        this.rangeStreamingLayoutList.forEach((item, index) => {
          item.dropDownList.item.forEach(element => {
            element['newName'] = item.name;
            element['newKey'] = item.dropDownList.name;
          });
        });
        this.liveAtHome[index] = {
          newName: item.dropDownList.item[index]['newName'],
          newKey: item.dropDownList.item[index]['newKey'],
          value: item.dropDownList.item[index].value,
          displayName: item.dropDownList.item[index].displayName
        };
        // this.selectIndus[index] = item.dropDownList.item[0];
      });

    } else if (this.cssType === 'customArea') {// 自定义面积
      this.list = this.data.dropDownList.item;
    }




  }
  // 点击大行业，渲染小行业
  getSmallIndus(big, isFirst?) {
    this.bigIndus.background = false;
    this.bigIndus = big;
    this.bigIndus.background = true;
    if (big.label === '全国' && !isFirst) {
      big.selected = !big.selected;
      if (big.selected) {
        // 清除省份及城市
        this.list.forEach(bigindus => {
          bigindus.checkLen = 0;
          if (bigindus.children) {
            bigindus.children.forEach(element => {
              element.selected = false;
            });
          }

        });
        this.selectIndus = [];
        // 选中全国
        big.checkLen = 1;
        this.selectIndus.push(big);
      } else {
        this.selectIndus = [];
        big.checkLen = 0;
      }
    }
    if (big.value.length === 4 && !isFirst) {
      big.selected = !big.selected;
      if (big.selected) {
        // 清除大区及小商区
        this.list.forEach(bigindus => {
          bigindus.checkLen = 0;
          if (bigindus.children) {
            bigindus.children.forEach(element => {
              element.selected = false;
            });
          }

        });
        this.selectIndus = [];
        // 选中全市
        big.checkLen = 1;
        this.selectIndus.push(big);
        // 清除全国
        if (this.list[0].label === '全国') {
          this.list[0].checklen = 0;
        }

      } else {
        this.selectIndus = [];
        big.checkLen = 0;
      }
    }

    setTimeout(() => {
      // fixed bug-view-5767.html
      if (big !== undefined && big.label === '不限') {
        $('#' + this.bigNameId).css('width', 'unset');
      } else {
        $('#' + this.bigNameId).css('width', '42%'); //恢复默认值
      }
    }, 80);

  }
  // 选中小行业
  selectSmallIndus(bigindus, item) {
    // 清除全国 全市
    if (this.list[0].label === '全国' || this.list[0].label === '全市') {
      this.list[0].checkLen = 0;
      this.list[0].selected = false;
      const index = this.selectIndus.findIndex(v => (v.label === '全国' || v.label === '全市'));
      if (index > -1) {
        this.selectIndus.splice(index, 1);
      }
    }

    item.selected = !item.selected;
    if (item.selected) {
      // tslint:disable-next-line:max-line-length
      if ((item.value.length === 2) || (item.value.length === 6)) {
        bigindus.children.forEach(element => {
          if (element.selected) {
            const index = this.selectIndus.findIndex(v => v.value === element.value);
            if (index > -1) { this.selectIndus.splice(index, 1); }
            element.selected = false;
          }
        });
        bigindus.checkLen = 0;
        this.checkNum(item, bigindus);
        console.log("item.value.length === 2) || (item.value.length === 6)");
      } else {
        //   不包含全市 全行业
        if (!bigindus.children[0].selected || bigindus.children[0].value.length > bigindus.value.length) {
          this.checkNum(item, bigindus);
          console.log("不包含全市 全行业");
        } else {
          const index = this.selectIndus.findIndex(v => v.value === bigindus.children[0].value);
          this.selectIndus.splice(index, 1);
          bigindus.children[0].selected = false;
          bigindus.checkLen -= 1;
          this.checkNum(item, bigindus);
          console.log("包含全市 全行业");
        }
      }
    } else {
      const index = this.selectIndus.findIndex(v => v.value === item.value);
      this.selectIndus.splice(index, 1);
      bigindus.checkLen -= 1;
      if (bigindus.checkLen < 0) {
        bigindus.checkLen = 0;
      }
    }
  }

  checkNum(item, bigindus) {
    if (this.selectIndus.length >= this.max) {
      this.appGlobalService.showToast(this.tip1 + this.max + this.tip2, 2000, 'top');
      item.selected = false;
      return;
    } else {
      item.selected = true;
      this.selectIndus.push(item);
      bigindus.checkLen += 1;
    }
  }



  dismiss() {
    // console.log(this.minInputValue);
    // console.log(this.maxInputValue);
    if (this.minInputValue !== '' && this.maxInputValue === '') {
      this.appGlobalService.showToast("请输入最大值！", 1500, 'middle');
      return;
    } else if (this.minInputValue === '' && this.maxInputValue !== '') {
      this.appGlobalService.showToast("请输入最小值！", 1500, 'middle');
      return;
    } else if (this.minInputValue !== '' && this.maxInputValue !== '') {
      if (this.minInputValue > this.maxInputValue) {
        this.appGlobalService.showToast("最小值不能大于最大值！", 1500, 'middle');
        return;
      } else {
        this.selectIndus[0] = { min: this.minInputValue, max: this.maxInputValue, displayName: this.minInputValue + '-' + this.maxInputValue };
      }
    }
    this.modalCtrl.dismiss(this.selectIndus);
  }
  reset() {
    this.selectIndus = [];
    if (this.cssType === 'secondaryLinkage') {// 区域,行业
      this.list.forEach(bigindus => {
        bigindus.checkLen = 0;
        if (bigindus.children) {
          bigindus.children.forEach(element => {
            element.selected = false;
          });
        }
      });
    } else if (this.cssType === 'streamingLayout') {// 整租,合租
      this.list.forEach(item => {
        item.dropDownList.item.forEach(element => {
          element.selected = false;
        });
      });
    } else if (this.cssType === 'customArea') { // 自定义面积 租金
      this.list.forEach(item => {
        item.selected = false;
      });
      this.maxInputValue = '';
      this.minInputValue = '';
    }
  }

  cancel() {
    this.modalCtrl.dismiss();
  }

  // 整租 合租 选择事件
  selectedType(event, it, item, dateIndex, singleMode) {
    event.stopPropagation();
    if (item) {
      if (singleMode === true) { // 单选模式
        item.forEach(element => {
          if (it.value === element.value) {
            element.selected = true;
            element['newName'] = this.list[dateIndex].name;
            element['newKey'] = this.list[dateIndex].dropDownList.name;
            this.selectIndus[dateIndex] = element;
          } else {
            element.selected = false;
          }
        });
      } else { // 多选模式
        if (it.displayName === '不限') { // 选中不限
          item.forEach(element => {
            if (it.value === element.value) {
              element.selected = !element.selected;
            } else {
              element.selected = false;
            }
          });
        } else { // 不限之外的按钮
          item.forEach(element => {
            if (it.value === element.value) {
              element.selected = !element.selected;
            } else if (element.displayName === '不限') {
              element.selected = false;
            }
          });
        }
        let labelArray = [];
        let valueArary = [];
        item.forEach(element => {
          if (element.selected === true) {
            labelArray.push(element.displayName);
            valueArary.push(element.value);
          }
        });
        this.selectIndus[dateIndex] = { newName: item[0]['newName'], newKey: item[0]['newKey'], value: valueArary.toString(), displayName: labelArray.toString() };
      }
    }
  }

  // 选择面积 租金
  selectedArea(event, it, singleMode) {
    event.stopPropagation();
    // 与输入框互斥
    this.minInputValue = '';
    this.maxInputValue = '';
    if (it) {
      if (singleMode === true) { // 单选模式
        this.list.forEach(element => {
          if (it.value === element.value) {
            element.selected = true;
          } else {
            element.selected = false;
          }
        });
        this.selectIndus[0] = it;
      } else { // 多选
        this.list.forEach(element => {
          if (it.value === element.value) {
            element.selected = !element.selected;
          }
        });
        let minArray = [];
        let maxArray = [];
        let displayNameArray = [];
        let valueArray = [];
        this.list.forEach(element => {
          if (element.selected === true) {
            if (element.min !== undefined) {
              minArray.push(element.min);
            }
            if (element.max !== undefined) {
              maxArray.push(element.max);
            }
            valueArray.push(element.value);
            displayNameArray.push(element.displayName);
          }
        });
        this.selectIndus[0] = { min: minArray.toString(), max: maxArray.toString(), displayName: displayNameArray.toString(), value: valueArray.toString() };
      }
    }
  }

  // 清除选中所有的面积以及租金
  customAreaRentClick(event) {
    event.stopPropagation();
    // 与面积租金按钮互斥
    if (this.list !== null && this.list.length > 0) {
      this.list.forEach(element => {
        element.selected = false;
      });
    }
  }


  //是否住家
  selectLiveAtHome(event, it, item, dateIndex, singleMode) {
    item.forEach(element => {
      if (it.value === element.value) {
        element.selected = true;

      }
    });
  }
}



